<template>
    <div style="width: 100%">
<!--        左上角的专业课程选择框-->
        <a-row style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3);">
            <a-row  style="margin-top: 3%">
                <a-col offset="3" :span="12">
                    <a-cascader placeholder="请选择科目" :options=$store.state.exercise.col_cou_list :default-value="['1','ac8c18382d']" change-on-select @change="onCascaderChange" style="width: 100%"/>
                </a-col>
                <a-col :offset="1" span="1">
                    <a-button type="primary" icon="search" @click="getQuestions">
                        搜索题目
                    </a-button>
                </a-col>
            </a-row>
            <a-row style="margin-top: 1%; margin-bottom: 2%">
                <a-col :offset="3" :span="12" v-if="this.$store.state.exercise.selected_chapter_name!==''">
                    <a-alert
                            type="info"
                            show-icon
                    ><span slot="message">
                        <a-row>
                            <a-col :span="12">
                                选中章节：<span style="color: #1890ff">{{$store.state.exercise.selected_chapter_name}}</span>
                            </a-col>
                        </a-row>
                    </span></a-alert>
                </a-col>
            </a-row>
        </a-row>
    </div>

</template>
<script>

    export default {

        data() {
            return {
                cascaderItem:[],
            };
        },
        methods: {
            onCascaderChange(value) {
                this.$store.state.exercise.selected_chapter_id="";
                this.$store.state.exercise.selected_chapter_name="";
                this.cascaderItem = value;
            },
            getQuestions() {
                if(this.$store.state.exercise.selected_chapter_id==="") {
                    this.$store.state.exercise.chapterTreeData = [
                        {
                            title: '正在加载章节目录……',
                            key: '123',
                            selectable:false
                        },
                    ]
                }
                this.$store.state.exercise.questionLoading=true
                this.$store.dispatch('exercise/getQuestions', {courseId: this.cascaderItem[1], page: 1, chapterId:this.$store.state.exercise.selected_chapter_id}).then(
                    res => {
                        if (res.code === 0 && this.$store.state.exercise.selected_chapter_id==="") {
                            this.$message.error(res.msg);
                            this.$store.state.exercise.questionLoading=false;
                            this.$store.state.exercise.chapterTreeData =  [
                                {
                                    title: '无章节',
                                    key: '123',
                                    selectable:false
                                },
                            ]
                        }else {
                            this.$store.state.exercise.questionLoading = false;
                            this.$store.state.exercise.question_list_load_key = new Date().getTime();
                            if (this.$store.state.exercise.selected_chapter_id==="") {
                                this.$store.dispatch('exercise/getChapterTree', this.cascaderItem[1]).then(
                                    res => {
                                        console.log(res)
                                        //数据插入开始
                                        this.$store.state.exercise.chapterTreeData = res.data
                                    }
                                ).catch((e) => {
                                    this.$message.error("网络异常" + e)
                                })
                            }
                        }
                    })
            },
        },
        mounted(){
            this.cascaderItem = ['1','ac8c18382d']
        },
        beforeCreate() { //初始获取学院和科目
            this.$store.dispatch('exercise/getCollage').then(//获取学院
                res=>{
                    if(res.code === 0){
                        this.$message.error(res.msg);
                    } else if(res.code===1){
                        //获取课程
                        this.$store.state.exercise.col_cou_list.forEach(item=>{
                            this.$store.dispatch('exercise/getCourse',item.value).then(
                                couRes=>{
                                    if(res.code === 0){
                                        this.$message.error(couRes.msg);
                                    }
                                }
                            )
                        })
                    }
                }
            ).catch(()=>{
                this.$message.error("网络异常")
            })
        }
    }
</script>
